<div ng-controller="MainController">
    <div id="datetime">
        <h2>{{ date.raw | date: 'HH:mm:ss'}} {{ date.raw | date: 'EEEE, MMMM yyyy' }} -- {{ user.location }}</h2>
    </div>
    
    <div id="forecast">
        <ul class="row list-unstyled">
            <li ng-repeat="day in weather.forecast.forecastday" class="col-md-3">
                <div ng-class="{today: $index == 0}">
                    <img class="{{ day.icon }}" ng-src="{{ day.icon_url }}" />
                    <span class="conditions">{{ day.conditions }}</span>
                    <h3>{{ day.high.celsius }}</h3>
                    <h4 ng-if="$index == 0">Now</h4>
                    <h4 ng-if="$index != 0">{{ day.date.weekday }}</h4>
                </div>
            </li>
        </ul>
        <pre>{{ weather.forecast | json }}</pre>
    </div>
</div>